<template>
  <a-drawer
    :title="title"
    :width="720"
    :visible="visible"
    :wrapStyle="{height: '100%',overflow: 'auto',paddingBottom: '108px'}"
    @close="close"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="角色名称">
          <a-input
            placeholder="请输入角色名称"
            v-decorator="[ 'roleName', {
              rules: [
                { required: true, message: '请输入角色名称!' },
                { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
              ]
            }]"
          />
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="角色编码">
          <a-input
            placeholder="请输入角色编码"
            :disabled="!!model.id"
            v-decorator="[ 'roleCode', {
              rules: [
                { required: true, message: '请输入角色编码!' },
                { min: 0, max: 64, message: '长度不超过 64 个字符', trigger: 'blur' },
                { validator: validateRoleCode}
              ]
            }]"
          />
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="描述">
          <a-textarea
            :rows="5"
            placeholder="..."
            v-decorator="[ 'description', {
              rules: [
                { min: 0, max: 126, message: '长度不超过 126 个字符', trigger: 'blur' }
              ]
            }]"
          />
        </a-form-item>
      </a-form>
    </a-spin>

    <div class="drawer-bottom-button">
      <a-button :style="{marginRight: '8px'}" @click="close">取消</a-button>
      <a-button @click="handleSubmit" type="primary">保存</a-button>
    </div>
  </a-drawer>
</template>

<script>
import { apiAddRole, apiEditRole } from '@/api/system'
import pick from 'lodash.pick'

export default {
  name: 'RoleModal',
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      visible: false,
      confirmLoading: false,
      title: '',
      model: {},
      form: this.$form.createForm(this)
    }
  },
  methods: {
    show (title, record) {
      this.form.resetFields()
      this.title = title
      this.visible = true
      if (record) {
        this.setFormValue(record)
      }
    },
    close () {
      this.visible = false
    },
    setFormValue (record) {
      this.model = record
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'roleName', 'roleCode', 'description'))
      })
    },
    validateRoleCode (rule, value, callback) {
      if (/[\u4E00-\u9FA5]/g.test(value)) {
        // eslint-disable-next-line
        callback('角色编码不可输入汉字!')
      } else {
        callback()
      }
    },
    handleSubmit () {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          const formData = Object.assign(this.model, values)
          let obj
          if (!this.model.id) {
            obj = apiAddRole(formData)
          } else {
            obj = apiEditRole(formData)
          }
          obj.then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.close()
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.drawer-bottom-button {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e9e9e9;
  padding: 10px 16px;
  background: #fff;
  text-align: right;
}
</style>
